<template>
    <div class='key-container' ref="key-container">
        <div class='keyboard fix_iphonex px1bb' :class="{'show': show}" @click.stop='()=>{return;}'>
            <div class="board-left">
                <div class='key-row'>
                    <div class='key-cell' data-num='1' @touchstart="touchstart" @touchend.prevent>1</div>
                    <div class='key-cell' data-num='2' @touchstart="touchstart" @touchend.prevent>2</div>
                    <div class='key-cell' data-num='3' @touchstart="touchstart" @touchend.prevent>3</div>
                </div>
    
                <div class='key-row'>
                    <div class='key-cell' data-num='4' @touchstart="touchstart" @touchend.prevent>4</div>
                    <div class='key-cell' data-num='5' @touchstart="touchstart" @touchend.prevent>5</div>
                    <div class='key-cell' data-num='6' @touchstart="touchstart" @touchend.prevent>6</div>
                </div>
    
                <div class='key-row'>
                    <div class='key-cell' data-num='7' @touchstart="touchstart" @touchend.prevent>7</div>
                    <div class='key-cell' data-num='8' @touchstart="touchstart" @touchend.prevent>8</div>
                    <div class='key-cell' data-num='9' @touchstart="touchstart" @touchend.prevent>9</div>
                </div>
    
                <div class='key-row'>
                    <div class='key-cell key-crile-cell' v-if="point" data-num='.' @touchstart="touchstart" @touchend.prevent>
                        <span class="key-crile" data-num='.'>
                        </span>
                    </div>
                    <div class='key-cell' data-num='-1' v-else>
                    </div>
                    <div class='key-cell' data-num='0' @touchstart="touchstart" @touchend.prevent>0</div>
                    <div class='key-cell img_close' @click="closePanel">
                        <img  src="~@/assets/imgs/components/close_keyboard.png">
                    </div>
                </div> 
            </div>

            <div class="board-right px1bt">
                <div class="key-cell2 px1bl" data-num='D' @touchstart="touchstart" @touchend.prevent>
                    <img data-num='D' src="~@/assets/imgs/components/icon_reduce.png">
                </div>
                <div class="key-cell2 blue" data-num='S' @touchstart="touchstart" @touchend.prevent>
                    <span class="key-text" data-num='S'>确定</span>
                </div>
            </div> 

        </div>
     
    </div>
</template>

<script>
export default {
    props: {
        show: {
            type: Boolean,
            default: true
        },
     
        point: {
            type: Boolean,
            default: false
        },
     
        initNum:{
            type: null,
        },
        maxLength:{
            type: Number,
            default: 30
        }
    },
    data() {
        return {
            number: '',
            activeIndex: '',
        }
    },
    created() {
      
    },
    methods: {
        //处理按键
        _handleKeyPress(e) {
            let num = e.target.dataset.num;
            //不同按键处理逻辑
            // -1 代表无效按键，直接返回
            if (num == -1||num==undefined) return false;
            // this.$refs.scrollFlag.scrollIntoView();
            switch (String(num)) {
                //小数点
                case '.':
                    this._handleDecimalPoint();
                    break;
                //删除键
                case 'D':
                    this._handleDeleteKey();
                    break;
                //清空键
                case 'C':
                    this._handleClearKey();
                    break;
                //确认键
                case 'S':
                    this.$emit('confirm');
                    break;
                default:
                    this._handleNumberKey(num);
                    break;
            }
        },
        //处理小数点函数
        _handleDecimalPoint() {
            if(typeof this.number == "undefined"){
                this.number = '';
            }
            //如果包含小数点，直接返回
            if (this.number.indexOf('.') > -1) return false;
            //如果小数点是第一位，补0
            if (!this.number.length) {
                this.number = '0.';
            }
            //如果不是，添加一个小数点
            else {
                this.number = this.number + '.';
            }
            this._handleConfirmKey();

        },
        //处理删除键
        _handleDeleteKey() {
            let S = this.number?this.number:'';
            //如果没有输入，直接返回
            if (!S.length) return false;
            //否则删除最后一个

            this.number = S.substring(0, S.length - 1);
            this._handleConfirmKey();

        },
        //处理清空键
        _handleClearKey() {
            this.number = '';
            this._handleConfirmKey();
        },
        //处理数字
        _handleNumberKey(num) {
            let S = this.number?this.number:'';

            if(this.point){
                //如果有小数点且小数点位数不小于2
                if (S.indexOf('.') > -1 ){
                    if( S.substring(S.indexOf('.') + 1).length < 2){
                        this.number = S + num;
                    }else{
                       
                    }
                }
                //没有小数点
                if (!(S.indexOf('.') > -1)) {
                    //如果第一位是0，只能输入小数点
                    if (num == 0 && S.length == 0)
                        this.number = '0.';

                    else {
                        if (S.length && Number(S.charAt(0)) === 0) return;
                        this.number = S + num;
                    }

                }
            }else{
                this.number = S + num;
            }
            
            this._handleConfirmKey();

        },
        //提交
        _handleConfirmKey() {
            if(typeof this.number == "undefined"){
                this.number = '';
            }
            
            let num = this.number;
         
            let maxLength = this.maxLength;
            if(num.indexOf('.') != -1){
                let numArr = num.split('.');
                if(numArr[0].length > this.maxLength){
                    numArr[0] = numArr[0].slice(0,this.maxLength);
                };
                num = numArr.join('.');
            }else{
                if(num.length > this.maxLength){
                   num = num.slice(0,this.maxLength);
                }
            };
            this.number = num;
            this.$emit('keyClick', num);
        },

        closePanel() {
            this.$emit('close');
        },

        touchstart(e) {
            this._handleKeyPress(e);
        },
        hideCursor(){
            this.cursorStyle = 'display:none;';
        },
        setValue(val){
            val = val + '';
            this.number = val;
        }
    },
    watch: {
     
    }
}
</script>

<style scoped lang="less">
.key-container {
//   height: 0.36rem;
}
.keyboard {
//   position: fixed;
//   bottom: 0px;
//   left: 0;
  height: 4.32rem;
  width: 100%;
  background-color: #fafbfc;
  transition: all 0.3s;
  z-index: 104;
  transform: translateY(100%);
  display: flex;
  align-items: center;
}
.keyboard.px1bb::after{
   background-color: #eee;
}

/* x,xs */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .keyboard.px1bb::after {
      bottom: 0.68rem;
  }
}
/* xr */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
  .keyboard.px1bb::after {
      bottom: 0.68rem;
  }
}

/* xs max */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  .keyboard.px1bb::after {
      bottom: 0.68rem;
  }
}


.keyboard.show {
  transform: translateY(0);
}

.keyboard .key-row {
  width: 5.4rem;
  display: flex;
  display: -webkit-flex;
  position: relative;
  /* height: 55px; */
  height: 1.08rem;
  /* line-height: 55px; */
  line-height: 1.08rem;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: #000;
}

.keyboard .key-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid #eee;
  color: #666;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.keyboard .key-cell {
  flex: 1;
  -webkit-box-flex: 1;
  text-align: center;
  position: relative;
  font-size: 0.54rem;
  color: #666;
  -webkit-tap-highlight-color: #000;
}
.keyboard .key-cell.key-crile-cell {
  display: flex;
  justify-content: center;
  align-items: center;
}
.keyboard .key-cell .key-crile {
  width: .12rem;
  height: .12rem;
  border-radius: 50%;
  background: #666;
  display: block;
}
.keyboard .key-cell:active {
  background-color: #f0f0f0;
}
.keyboard .key-cell.img_close {
  display: flex;
  align-items: center;
  justify-content: center;
}
.keyboard .key-cell.img_close img {
  width: 0.61rem;
  height: auto;
}

.keyboard .key-cell::after {
  content: "";
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  height: 200%;
  border-right: 1px solid #eee;
  color: #666;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.keyboard .key-cell:nth-last-child(1)::after {
  border-right: 0;
}

.keyboard .disabled {
  background: rgba(0, 0, 0, 0.2);
}
.keyboard .disabled:active {
  background: rgba(0, 0, 0, 0.2);
}


.board-right{
     flex: 1;
     display: flex;
     flex-direction: column;
     height: 4.32rem;
    .key-cell2{
        flex: 1;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 2.16rem;

        &.blue{
          background-color: #14C878;
          color: #fff;
        }
        img{
            width: 0.61rem;
            height: auto;
        }
        .key-text{
          font-size: 0.44rem;
        }
    }

}

</style>